<template>
	<div class="select_list" :style="[style]">
		<!-- 列表 -->
		<ul class="select_list" style="width: 100%;height: 100%; overflow-y: auto;">
			<li @click='addIcon'>
				<div class="image">
					<img src="../../../static/新增.svg" alt="">
				</div>
				<p>
					新增 icon
				</p>
			</li>
			<li v-for="(item,index) in dataList" :key="index" @longpress="longpress(item)" @click='addBill(item)'>
				<div class="image">
					<img :src="item.image" alt="">
				</div>
				<p>
					{{item.title}}
				</p>
			</li>
			<li v-for="item in 4 - ((dataList.length + 1) % 4 == 0 ? 4 : (dataList.length + 1) % 4)"></li>
		</ul>


	</div>

</template>

<script>
	export default {

		props: {
			dataList: {
				type: Array,
				default () { 
					return []
				},
				required: false
			},
			style: {
				type: Object,
				default () {
					return {
						'--background': '#262221',
						'--background_box': '#1c1a1b',
						'--color': '#fff',
						'--color_ramk': '#f1f1f1',
						'--image_color': '#fff',
						'--box-shadow':'0 0 10px 0 rgba(255, 255, 255, 0.3)'
					}
				},
				required: false
			}

		},

		data() {
			return {
				isShowAdd: false,
				is_showTime: false,
			}
		},



		methods: {
			addIcon() {
				this.$emit('addIcon')
			},

			// 添加账单
			addBill(item) {
				this.$emit("addBill", item)
			},

			// 长按
			longpress(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除该分类吗？',
					confirmText: "删除", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success: function(res) {
						if (res.confirm) {
							that.$emit('deleteIocn', item)
						}
					}
				})
			}


		}
	}
</script>

<style scoped>
	.select_list {
		width: 100%;
		height: 100%;
		background: var(--background_box);
		padding: 10px 0;
		box-sizing: border-box;
	}

	.select_list li {
		width: 24%;
		aspect-ratio: 1/1;
		border-radius: 10px;
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
		float: left;
	}

	.select_list li .image {
		width: 80%;
		height: 70%;
		padding: 10px;
		box-sizing: border-box;
		background: var(--background);
		border-radius: 10px;
	}

	.select_list li .image img {
		width: 100%;
		height: 100%;
	}

	.select_list li p {
		font-size: 14px;
		font-weight: 700;
		color: var(--color);
		margin-top: 5px;
	}

	.isShowAdd {
		width: 100%;
		height: 100%;
		background: var(--background);
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}
</style>